<template>
  <div>
    <div class="top-nav">
      <div class="bx">
        <div class="fl" v-if="!name">
          <ul>
            <li>欢迎你!</li>
            <li>请 <a @click="toLogin">登录</a></li>
            <li><a @click="toReginter">免费注册</a></li>
          </ul>
        </div>
        <div class="fl" v-if="name">
          <ul>
            <li>欢迎你{{ name }}</li>
            <li @click="exit"><a>退出</a></li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li><a>我的订单</a></li>
            <li><a>企业采购</a></li>
            <li><a>客户服务</a></li>
            <li><a>网站导航</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!--最顶层导航栏，结束-->
    <!--logo部分搜索框，开始-->
    <!--放锚点，使下方点击返回顶端按钮返回-->
    <a name="dinduan"></a>
    <div class="head-logo bx">
      <img style="width: 50px;" src="@/assets/logo.png" />
      <span style="line-height: 40px;margin-left: 30px;font-weight: 700;font-size: 30px;">扶农助农平台</span>
      <!--子盒子center，中间放置搜索框-->
      <div class="center">
        <div class="sou">
          <input v-model="searchInput" type="text" class="fl" placeholder="请输入需要搜索的内容" />
          <button @click="search" class="fr">搜索</button>
          <ul>
            <li class="font-red">基础农产品</li>
            <li>农产品</li>
            <li>农作物</li>
            <li>蛋类</li>
            <li>手工艺品</li>
          </ul>
        </div>
      </div>
      <!-- <div class="gou">
        <a href="jiesuan.html">
          <img src="img/gwc.png" />我的购物车
          <div class="red8">8</div>
        </a>
      </div> -->
    </div>

    <!--logo部分搜索框，结束-->
    <!--分类部分，开始-->
    <div class="top-fen">
      <div class="bx">
        <div class="left">
          <ul>
            <li>秒杀</li>
            <li>即将售罄</li>
            <li>超值低价</li>
          </ul>
        </div>
        <div class="left1">
          <ul>
            <li>基础农产品</li>
            <li class="font-red">农产品</li>
            <li>农作物</li>
            <li>蛋类</li>
            <li>手工艺品</li>
          </ul>
        </div>
      </div>
    </div>
    <!--分类部分，结束-->
    <!--public公共区域1，结束-->
    <!--主体抢购区部分,开始-->
    <div class="qianggou bx" style="margin: 10px auto 50px auto;">
      <img style="width: 100%;height: 180px;" src="@/png/1.png" title="" />
    </div>
    <!--抢购区-->
    <div class="qgou bx">
      <ul>
        <li v-for="(item) in data" :key="item.id">
          <!-- <div v-if="item.inventory > 0"> -->
          <div class="shou">
            <img style="width: 100%;border-radius: 15px;height: 70%;" :src="item.imageUrl" />
            <p style="font-size: 26px;">{{ item.name }}</p>
            <p><i>{{ item.price }}/吨</i></p>
            <div class="yy" style="display: flex;flex-wrap: nowrap;">
              <span class="fl	">已售{{ item.salesVolume }}</span>
              <div class="fat">
                <div :style="{ width: item.salesVolume / (item.salesVolume + item.inventory) * 100 + '%' }"
                  style="height: 100%;background-color: #e60012;"></div>
              </div>
              剩余<b class="font-red">{{ item.inventory }}</b>吨
            </div>
          </div>
          <button v-if="item.inventory !== 0" @click="to(item)">立即购买</button>
          <button v-if="item.inventory <= 0" style="background-color: #ccc;">已售空</button>
          <!-- </div> -->
        </li>
      </ul>
    </div>
    <el-pagination @current-change="handleCurrentChange" :total="pageSize"
      style="position: absolute;left: 50%;transform: translate(-50%,0);margin-top: -100px;" background
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>
<script>
import '../style/chushihua.css'
import '../style/fenlei.css'
import '../style/public.css'
import axios from 'axios'
export default {
  data() {
    return {
      data: '',
      pageSize: '',
      searchInput: '',
      name: ''
    }
  },
  mounted() {
    this.name = localStorage.getItem('username')
    axios.get("http://localhost/goods/1").then(res => {
      console.log(res);
      this.data = res.data.records
      this.pageSize = res.data.pages * 10
    })
  },
  methods: {
    to(item) {
      this.$router.push({
        path: "/goods",
        query: item
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      axios.get("http://localhost/goods/" + val).then(res => {
        console.log(res);
        this.data = res.data.records
      })
    },
    search() {
      if (this.searchInput == '') {
        axios.get("http://localhost/goods/1").then((res) => {
          console.log(res.data.records);
          this.data = res.data.records
          this.searchInput = ''
        })
      } else {
        axios.get("http://localhost/selectNameGoods/" + this.searchInput).then((res) => {
          if (res.data[0] == undefined) {
            this.$message({
              message: '搜索的商品不存在!',
              type: 'warning'
            });
            this.searchInput = ''
          } else {
            this.data = res.data
            this.searchInput = ''
          }
        })
      }
    },
    exit() {
      localStorage.removeItem("username")
      this.$router.push('/login')
    },
    toReginter() {
      this.$router.push('/register')
    },
    toLogin() {
      this.$router.push('/login')
    }
  },
}
</script>

<style scoped>
body {
  background: #fff;
}
</style>